<!--头部公共部分-->
{include file="common/header" /}

<div class="x-nav">
      <span class="layui-breadcrumb">
        <a>首页</a>
        <a>教务</a>
        <a>
          <cite>课表及点名管理</cite></a>
      </span>
    <a class="layui-btn layui-btn-xs layui-btn-small" style="float:right;margin-top: 10px;"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon layui-icon-refresh"></i> </a>
</div>
<div style="padding:15px;">
    <form class="layui-form layui-form-pane">

        <script>
            var jsonroomlist = eval('{$jsonroom}'); //教室列表

            for(var i = 0 ; i < jsonroomlist.length;){
                document.write('<div class="layui-form-item">');
                for(var j = 0; j  < 4; j ++){
                    if((i+j) < jsonroomlist.length){
                        document.write('<div class="layui-inline" >');
                        document.write('<div class="layui-btn layui-btn-lg  layui-btn-primary"  name="divitem"  onclick="on_Choice(this)" style="width: 250px;height: 130px;text-align: center;line-height: 130px;border-width: 3px;">');
                        document.write('<input type="hidden" name="room_id" value="'+jsonroomlist[i+j].room_id +'">');
                        document.write('<input type="hidden" name="pos" value="'+(i+j) +'">');
                        document.write('<span style="color:#1E9FFF;font-size: 18px;">'+jsonroomlist[i+j].room_name+'</span>');
                        if(jsonroomlist[i+j].room_status === 1){
                            document.write('<span class="layui-badge layui-bg-blue" style="position:absolute;left:5px;top:5px;width:45px;">'+ jsonroomlist[i+j].teacher+'</span>');
                            document.write('<span class="layui-badge layui-bg-blue" style="position:absolute;left:5px;top:25px;width:45px;" title="'+jsonroomlist[i+j].course_name+'">'+jsonroomlist[i+j].course_name +'</span>');
                            document.write('<span class="layui-badge" style="position:absolute;right:5px;bottom:5px;width:35px;">占用</span>');
                        }else if(jsonroomlist[i+j].room_status === 0){
                            document.write('<span class="layui-badge layui-bg-green" style="position:absolute;right:5px;bottom:5px;width:35px;">空闲</span>');
                        }
                        document.write('</div>');
                        document.write('</div>');
                    }else{
                        break;
                    }
                }
                document.write('</div>');
                i = i+4;
            }
        </script>
        <hr class="layui-bg-green"  style="margin-top:30px;border-bottom: solid 2px green">
        <table class="layui-table" id="datalist" lay-filter="Event"></table>
        <script type="text/html" id="name">
            <a lay-event="see_info" class="layui-table-link">{{ d.class_grades_name }}</a>
        </script>
        <script type="text/html" id="barTable">
            {{# if(d.status == 1){ }}
            <a class="layui-btn layui-btn-xs " lay-event="cancel_dm">撤销上课</a>
            {{# } else { }}
            <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="dm">点名上课</a>
            {{# } }}


            {{# if(d.status == 1){ }}
            <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="modify_student">修改上课信息</a>
            {{# } else { }}
            <a class="layui-btn layui-btn-xs layui-btn-disabled"><span title="未上课班级请进入【点名上课】中操作【添加或移除学员】">修改上课信息<sup><span class="layui-badge-dot" style="position: relative; top: -3px; left: -3px;"></span></sup></span></a>
            {{# } }}



            <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="change_content">修改上课内容</a>
            {{# if(d.status == 1){ }}
            <a class="layui-btn layui-btn-xs layui-btn-disabled" ><span title="已上课班级无法操作【删除】功能">删除<sup><span class="layui-badge-dot" style="position: relative; top: -3px; left: -3px;"></span></sup></span></a>
            {{# } else { }}
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
            {{# } }}




        </script>

    </form>
</div>
<!--底部公共部分-->
{include file="common/footer" /}
<script>

    var tableIns;
    var divs= document.getElementsByName("divitem");  //选中
    if(divs.length > 0){
        $(divs[0]).css({"background-color":"#FFB800"});
    }
    function on_Choice(obj) {
        var id = $(obj).find("input[name='room_id']").val();
        var pos = parseInt($(obj).find("input[name='pos']").val());
        for(var i =0 ; i < divs.length; i ++){
            if(i === pos){
                $(divs[i]).css({"background-color":"#FFB800"});
            }else{
                $(divs[i]).css({"background-color":"white"});
            }

        }

        var field = {};
        field.room_id = id;
        $.ajax({
            url: '/admin/timetable/updatesession',
            method: "post",
            data: field,
            beforeSend: function () {

            },
            success: function (result) {
                if (result.code === 1) {
                    tableIns.reload();
                }

            },
            complete: function () {
            },
            error: function (error) {
                console.log(error)
            }
        });

    }
    setTimeout(function(){location.reload()},60000); //指定1分钟刷新一次

    layui.use(['table','element', 'form', 'laydate', 'layer'], function () {
        var table = layui.table,
            laydate = layui.laydate,
            element = layui.element,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        var loading = layer.load();
        //方法级渲染
        tableIns = table.render({
            elem: '#datalist'
            , url: '{:url("Timetable/getlists")}'
            , method: 'POST'
            , loading: true
            , parseData: function (res) { //res 即为原始返回的数据
                if (res.code === 1) {
                    res.code = 0;
                } else {
                    res.code = -1;
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
            cols: [[
                {field: 'id', title: 'ID', width: 100, align: 'center'
                },{field: 'class_grades_name', title: '班级名称', width:300, align: 'center',templet: '#name'
                }, {field: 'teacher', title: '上课老师', width: 120, align: 'center'
                }, {field: 'class_time', title: '上课时间', width: 300, align: 'center'
                }, {field: 'duration', title: '时长', width: 100, align: 'center'
                }, {field: 'status_text', title: '状态', width: 150, align: 'center'
                }, {field: 'actual_number', title: '实到人数', width: 100, align: 'center'
                },{fixed: 'right', title: '操作', width: 360, align: 'center', toolbar: '#barTable'}
            ]]
            , height: 'full-180'
            , page: true
            , done: function () {
                $("[data-field='id']").css('display','none');
                layer.close(loading);

            }
        });


        //监听工具条
        table.on('tool(Event)', function (obj) {
            var data = obj.data; //获得当前行数据
            console.log(data)
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if (layEvent === 'dm') { //查看
                var title = '点名上课';
                if(data.class_grades_name.indexOf("补课班级") != -1){
                    title = '点名上课【补课】';
                }
                layer.open({
                    skin: 'layui-layer-lan',
                    type: 2,
                    closeBtn: 2,
                    title: title,
                    area: ['98%', '95%'],
                    shadeClose: false,
                    content: "{:url('Arranging/roll_call')}?id="+data.id,
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        body.find("input[name='grades_name']").val(data.class_grades_name);
                        body.find("input[name='class_time']").val(data.class_date);
                    },
                    cancel: function(index, layero){
                        var field = {};
                        field.id = data.id;
                        $.ajax({
                            url: '/admin/arranging/close',
                            method: "post",
                            data: field,
                            beforeSend: function () {
                                isLoad = layer.load(0, {
                                    shade: false
                                }); //0代表加载的风格，支持0-2
                            },
                            success: function (result) {
                                layer.msg(result.msg);
                                if (result.code === 1) {
                                    layer.close(index)
                                    tableIns.reload();

                                }

                            },
                            complete: function () {
                                layer.close(isLoad)
                            },
                            error: function (error) {
                                console.log(error)
                            }
                        });
                        return false;
                    },

                    end:function () {

                        tableIns.reload();
                    }

                });
            }else if(layEvent === 'del'){
                layer.confirm('真的删除该节课么?', function (index) {
                    $.post("{:url('Arranging/class_del')}", {
                        id: data.id
                    }, function (result) {
                        if (result.code === 1) {
                            layer.msg(result.msg, {
                                time: 2000
                            });
                        //    tableIns.reload();
                              location.reload();
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 2000
                            });
                        }
                    }, "json")
                });

            }else if(layEvent === 'change_content'){  //修改上课内容

                layer.open({
                    skin: 'layui-layer-lan',
                    type: 2,
                    closeBtn: 2,
                    title: '修改上课内容',
                    area: ['50%', '65%'],
                    shadeClose: false,
                    content: "{:url('Arranging/get_content')}?id="+data.id
                });

            }else if(layEvent === 'cancel_dm'){     //撤消排课
                layer.confirm('真的撤销该节课么?', function (index) {
                    $.post("{:url('Arranging/cancel_grades')}", {
                        id: data.id
                    }, function (result) {
                        if (result.code === 1) {
                            layer.msg(result.msg, {
                                time: 2000
                            });
                            tableIns.reload();

                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 2000
                            });
                        }
                    }, "json")
                });
            }else if(layEvent === 'see_info'){
                //修改上课信息

            }else if(layEvent === 'modify_student'){

                layer.open({
                    skin: 'layui-layer-lan',
                    type: 2,
                    closeBtn: 2,
                    title: '修改上课信息',
                    area: ['98%', '95%'],
                    shadeClose: false,
                    content: "{:url('Arranging/modify_student')}?id="+data.id,
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        body.find("input[name='grades_name']").val(data.class_grades_name);
                        body.find("input[name='class_time']").val(data.class_date);
                    },
                    cancel: function(index, layero){

                    },

                    end:function () {

                        tableIns.reload();
                    }

                });

            }
        });

    });



</script>

